<script>
import moment from "moment";
import {baseUrl} from "@/http/http.js";
import EditImage from "@/components/editImage.vue";

export default {
  components: {EditImage},
  data() {
    return {
      columns: [
        {
          title: "序号",
          key: "序号",
          dataIndex: "CertId",
        },
        {
          title: "证书图片",
          dataIndex: "CertImg",
        },
        {
          title: "名称",
          dataIndex: "CertName",
        },
        {
          title: "编号",
          dataIndex: "CertNum",
        },
      ],
      listData: [], moment,
      boolData: {
        isShow: false,
      },
      isEditImage: false,
      pageObj: {
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: true,
        showJumper: true,
        showPageSize: true,
        pageSizeOptions: [10, 15, 30, 50],
      },
      addValue: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await this.$Http.cert();
      if (res["Data"]) {
        this.listData = res["Data"]["Data"];
      }
    },
    addData() {
      this.boolData.isShow = true;
      this.addValue = {
        CertId: 0,
        CertName: "",
        CertNum: "",
        CertImg: "",
        CertCon: "",
      }
    },
    viewData(data) {
      this.boolData.isShow = true;
      this.addValue = data;
    },
    async editData() {
      if (this.addValue.CertId === 0) {
        await this.$Http.certAdd({
          CertName: this.addValue.CertName,
          CertNum: this.addValue.CertNum,
          CertImg: this.addValue.CertImg,
          CertCon: this.addValue.CertCon,
        });
      } else {
        await this.$Http.certEdit({
          CertId: this.addValue.CertId,
          CertName: this.addValue.CertName,
          CertNum: this.addValue.CertNum,
          CertImg: this.addValue.CertImg,
          CertCon: this.addValue.CertCon,
        });
      }
      await this.getData();
      this.boolData.isShow = false;
    },
    getImgUrl(imgUrl) {
      if (!imgUrl) {
        return
      }
      if (imgUrl.length < 30) {
        return baseUrl + 'upload/' + imgUrl;
      } else {
        return imgUrl;
      }
    },
    async customRequest(option) {
      const {onError, onSuccess, fileItem, name} = option;
      const xhr = new XMLHttpRequest();
      xhr.onerror = function error(e) {
        onError(e);
      };
      xhr.onload = function onload() {
        if (xhr.status < 200 || xhr.status >= 300) {
          return onError(xhr.responseText);
        }
        onSuccess(xhr.response);
      };
      const formData = new FormData();
      formData.append(name || "file", fileItem.file);
      const res = await this.$Http.upFile(formData);
      if (res["fdown"]) {
        this.addValue.CertImg = res["fdown"];
        this.$message.success("上传成功");
      }
    },
    async delData(data) {
      await this.$Http.certDel({CertId: data["CertId"]});
      this.$message.success("删除成功!");
      await this.getData();
    },
    setImage(data) {
      this.addValue.CertImg = data;
      this.isEditImage = false;
    }
  },
};
</script>

<template>
  <a-card>
    <div class="sea">
      <a-space>
        <a-button type="primary" @click="addData">添加</a-button>
      </a-space>
    </div>
    <a-table :data="listData">
      <template #columns>
        <a-table-column v-for="(item,i) of columns" :title="item.title" :data-index="item.dataIndex" :key="i++">
          <template v-if="item.title==='序号'" #cell="{ rowIndex}">
            {{ rowIndex + 1 }}
          </template>
          <template v-if="item.title==='证书图片'" #cell="{ record }">
            <a-image :src="getImgUrl(record.CertImg)" width="50" height="50"/>
          </template>
          <template v-if="item.title==='添加时间'" #cell="{ record }">
            <a-tag> {{ moment(record["CreateTime"]).format("YYYY-MM-DD") }}</a-tag>
          </template>
        </a-table-column>
        <a-table-column title="操作">
          <template #cell="{ record,rowIndex }">
            <a-space>
              <a @click="viewData(record)">编辑</a>
              <a-popconfirm :content="`确诊删除 ${record['CertName']} ?`" @ok="delData(record)" okText="删除" cancelText="取消">
                <a>删除</a>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-card>
  <a-modal title="查看证书" :width="800" v-model:visible="boolData.isShow" :footer="null" @cancel="boolData.isShow===false">
    <a-form :model="addValue" auto-label-width>
      <a-form-item label="名称">
        <a-input v-model="addValue.CertName" placeholder="名称"/>
      </a-form-item>
      <a-form-item label="编号">
        <a-input v-model="addValue.CertNum" placeholder="编号"/>
      </a-form-item>
      <a-form-item label="证书">
        <a-space>
          <a-image v-show="addValue.CertImg" :src="getImgUrl(addValue.CertImg)" width="50" height="50"/>
          <a-input v-model="addValue.CertImg" style="width: 500px;" placeholder="证书"/>
          <a-button type="primary" @click="isEditImage=true">{{ addValue.CertImg ? '编辑' : '添加' }}</a-button>
        </a-space>
      </a-form-item>
      <a-form-item label="简要说明">
        <a-textarea v-model="addValue.CertCon" placeholder="字数限制152字以内" max-length="152" allow-clear show-word-limit/>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="editData()">{{ addValue.CertId > 0 ? "编辑" : "添加" }}</a-button>
          <a-button @click="boolData.isShow=false">取消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal :width="1500" title="选择产品图片" v-model:visible="isEditImage" :footer="null" @cancel="isEditImage=false">
    <div style="height: 700px;overflow-y:auto;overflow-x:hidden; ">
      <edit-image :type-id="2" :is-return="true" @setImage="setImage"/>
    </div>
  </a-modal>
</template>

<style scoped lang="less">

</style>
